@import "scss/bootstrap.scss";

html {
    height: 100%;
}

body {
    margin: auto;
    height: 100%;
}

.login-container {
    @include make-container();
    width: 400px;
    height: 300px;
    text-align: center;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -150px 0 0 -200px;
}

.center {
    text-align: center;
    margin: 0 auto;
}

.login-main form{
    height: 100%;
    display: grid;
    grid-template-rows: 40% 40% 20%;
}

.login-main__inputBoxList {
    display: grid;
    grid-template-rows: 50% 50%;
    height: 100%;
}

.login-main__inputBox {
    display: grid;
    max-height: 2em;
    grid-template-columns: 40% 60%;
    margin: 0 20%;
}

.login-main__inputBox label {
    display: block;
    text-align: center;
    margin: auto;
}

.login-main__inputBox input {
    display: block;
    height: auto;
}

.login-main__buttonContainer {
    display: grid;
    grid-template-columns: 50% 50%;
    height: 30%;
}

.login-main__buttonContainer input[type="submit"] {
    margin: 0 auto;
}

.login-footer {
    margin: auto 10%;
}